<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>GeoJSONLayer - 4.13</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.13/"></script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>

<script>
    require([
        "esri/Map",
        "esri/layers/GeoJSONLayer",
        "esri/views/MapView",
        "esri/WebMap",
        "esri/geometry/Circle",
        "esri/Graphic",
        "esri/Color"
    ], function (Map, GeoJSONLayer, MapView, WebMap, Circle, Graphic,Color) {
        const url = "./data.json";
        const url_line = "./data_line.json";

        const template = {
            title: "车站信息",
            // content: "车站名称：{stationName}；热度：{hotRadio}；风险值：{riskValue}；风险级别：{riskLevel}"
            content:[{
                type: "fields",
                fieldInfos:[
                    {
                        fieldName: "stationName",
                        label: "站点",
                        format: {
                            digitSeparator: true,
                            places: 0
                        }
                    },
                    {
                        fieldName: "hotRadio",
                        label: "热度",
                        format: {
                            digitSeparator: true,
                            places: 0
                        }
                    },
                    {
                        fieldName: "riskValue",
                        label: "风险值",
                        format: {
                            digitSeparator: true,
                            places: 0
                        }
                    },
                    {
                        fieldName: "riskLevel",
                        label: "风险级别",
                        format: {
                            digitSeparator: true,
                            places: 0
                        }
                    }
                ]
            }]
        };

        const renderer = {
            type: "simple",
            field: "mag",
            symbol: {
                type: "simple-marker",
                color: "orange",
                outline: {
                    color: "white"
                }
            },
            visualVariables: [
                {
                    type: "size",
                    field: "mag",
                    stops: [
                        {
                            value: 2.5,
                            size: "4px"
                        },
                        {
                            value: 8,
                            size: "40px"
                        }
                    ]
                }
            ]
        };

        const geojsonLayer = new GeoJSONLayer({
            url: url,
            copyright: "station",
            popupTemplate: template,
            // renderer: renderer
        });

        const lineLayer = new GeoJSONLayer({
            url: url_line,
            copyright: "lines",
            // popupTemplate: template,
            // renderer: renderer
        });

        var map = new WebMap({
            portalItem: {
                id: "5cb5dbd97a6c4d05bad6efd259207fe4"
                // id: "e691172598f04ea8881cd2a4adaa45ba"
                // id: "fb9f790fa05249ca94a02454d943f355"
            },
            layers: [lineLayer,geojsonLayer]
        });

        const view = new MapView({
            container: "viewDiv",
            center: [102.997849, 30.001554],
            zoom: 10,
            map: map
        });

        view.on("click", function (evt) {
            view.hitTest(evt).then(function (response) {
                var result = response.results[0];
                addCircle(result.graphic);
            })
        })


        function addCircle(graphic) {
            view.graphics.removeAll();
            var center = graphic.geometry;
            var dis = parseFloat(graphic.attributes.hotRadio);
            var circle = new Circle({
                hasZ: false,
                hasM: false,
                center: center,
                radius: dis,
                radiusUnit: "meters",
                spatialReference: center.spatialReference
            })
            // var color = [51, 51, 204, 0.5];
            var color =new Color(graphic.attributes.color) ;
            var graphic = new Graphic({
                geometry: circle,
                symbol: {
                    type: "simple-fill",
                    color: color,
                    style: "solid",
                    outline: {
                        color: "white",
                        width: 1
                    }
                }
            });
            view.graphics.add(graphic);
        }
    });
</script>


<style>
    html,
    body,
    #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }
</style>
